<template>
    <div id="warningbox" :style="{width:width}" >
        <i class="el-icon-warning"></i>
        <slot></slot>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:{
        width:{
            type:String,
            default:'100%'
        }
    }
}
</script>

<style scoped lang='scss'>
#warningbox{
    background: #fffbe6;
    border-radius: 2px;
    border: 1px solid #ffe58f;
    color: rgba(0,0,0,.65);
    line-height: 1.5;
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0 auto;
    i{
        font-size: 18px;
        color: #faad14;
        margin-right: 15px;
    }
    p{
        margin: 0;
        padding: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

</style>